const messageDemo = [
  {
    id: "29",
    role: "user",
    content: "用react写一个登录,简约,github登录类型,放在右侧",
    experimental_attachments: [],
  },
  {
    id: "30",
    role: "assistant",
    content:
      '好的，我来为您创建一个简约的React登录组件，类似于GitHub的登录界面，并将其放置在右侧。我们将使用Tailwind CSS进行样式设计，并添加一个GitHub风格的登录按钮。\n\n<thinking>这个请求适合创建一个新的React组件artifact。它是一个独立的、可重用的UI元素，可能会在多个地方使用或被修改。我们将创建一个新的artifact，标识符为"github-style-login"。</thinking>\n\n<artifact identifier="github-style-login" type="application/react" title="GitHub Style Login Component">\nimport React, { useState } from \'react\';\nimport { GitHub } from \'lucide-react\';\n\nconst LoginComponent = () => {\n  const [username, setUsername] = useState(\'\');\n  const [password, setPassword] = useState(\'\');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    console.log(\'Login submitted\', { username, password });\n    // Here you would typically handle the login logic\n  };\n\n  return (\n    <div className="flex justify-end min-h-screen bg-gray-100">\n      <div className="w-full max-w-md p-8 space-y-8 bg-white shadow-md">\n        <div>\n          <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900">\n            Sign in to your account\n          </h2>\n        </div>\n        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n          <div className="rounded-md shadow-sm space-y-4">\n            <div>\n              <label htmlFor="username" className="sr-only">\n                Username or email address\n              </label>\n              <input\n                id="username"\n                name="username"\n                type="text"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Username or email address"\n                value={username}\n                onChange={(e) => setUsername(e.target.value)}\n              />\n            </div>\n            <div>\n              <label htmlFor="password" className="sr-only">\n                Password\n              </label>\n              <input\n                id="password"\n                name="password"\n                type="password"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Password"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n              />\n            </div>\n          </div>\n\n          <div>\n            <button\n              type="submit"\n              className="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n            >\n              Sign in\n            </button>\n          </div>\n        </form>\n        <div>\n          <button\n            type="button"\n            className="relative flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md group hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n          >\n            <GitHub className="w-5 h-5 mr-2" />\n            Sign in with GitHub\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default LoginComponent;\n</artifact>\n\n这个React组件创建了一个简约的登录界面，类似于GitHub的风格，并放置在右侧。以下是组件的主要特点：\n\n1. 使用Tailwind CSS进行样式设计，确保简洁美观。\n2. 包含用户名/邮箱和密码输入框。\n3. 添加了一个常规的"Sign in"按钮。\n4. 包含一个GitHub风格的登录按钮，使用Lucide React的GitHub图标。\n5. 整个登录表单放置在右侧。\n\n要使用这个组件，你需要确保你的项目中已经设置了Tailwind CSS和Lucide React。如果需要进一步自定义或添加功能，请随时告诉我。',
    experimental_attachments: [],
  },

  {
    id: "29",
    role: "user",
    content: "用react写一个登录,简约,github登录类型,放在右侧",
    experimental_attachments: [],
  },
  {
    id: "30",
    role: "assistant",
    content:
      '好的，我来为您创建一个简约的React登录组件，类似于GitHub的登录界面，并将其放置在右侧。我们将使用Tailwind CSS进行样式设计，并添加一个GitHub风格的登录按钮。\n\n<thinking>这个请求适合创建一个新的React组件artifact。它是一个独立的、可重用的UI元素，可能会在多个地方使用或被修改。我们将创建一个新的artifact，标识符为"github-style-login"。</thinking>\n\n<artifact identifier="github-style-login" type="application/react" title="GitHub Style Login Component">\nimport React, { useState } from \'react\';\nimport { GitHub } from \'lucide-react\';\n\nconst LoginComponent = () => {\n  const [username, setUsername] = useState(\'\');\n  const [password, setPassword] = useState(\'\');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    console.log(\'Login submitted\', { username, password });\n    // Here you would typically handle the login logic\n  };\n\n  return (\n    <div className="flex justify-end min-h-screen bg-gray-100">\n      <div className="w-full max-w-md p-8 space-y-8 bg-white shadow-md">\n        <div>\n          <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900">\n            Sign in to your account\n          </h2>\n        </div>\n        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n          <div className="rounded-md shadow-sm space-y-4">\n            <div>\n              <label htmlFor="username" className="sr-only">\n                Username or email address\n              </label>\n              <input\n                id="username"\n                name="username"\n                type="text"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Username or email address"\n                value={username}\n                onChange={(e) => setUsername(e.target.value)}\n              />\n            </div>\n            <div>\n              <label htmlFor="password" className="sr-only">\n                Password\n              </label>\n              <input\n                id="password"\n                name="password"\n                type="password"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Password"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n              />\n            </div>\n          </div>\n\n          <div>\n            <button\n              type="submit"\n              className="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n            >\n              Sign in\n            </button>\n          </div>\n        </form>\n        <div>\n          <button\n            type="button"\n            className="relative flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md group hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n          >\n            <GitHub className="w-5 h-5 mr-2" />\n            Sign in with GitHub\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default LoginComponent;\n</artifact>\n\n这个React组件创建了一个简约的登录界面，类似于GitHub的风格，并放置在右侧。以下是组件的主要特点：\n\n1. 使用Tailwind CSS进行样式设计，确保简洁美观。\n2. 包含用户名/邮箱和密码输入框。\n3. 添加了一个常规的"Sign in"按钮。\n4. 包含一个GitHub风格的登录按钮，使用Lucide React的GitHub图标。\n5. 整个登录表单放置在右侧。\n\n要使用这个组件，你需要确保你的项目中已经设置了Tailwind CSS和Lucide React。如果需要进一步自定义或添加功能，请随时告诉我。',
    experimental_attachments: [],
  },

  {
    id: "29",
    role: "user",
    content: "用react写一个登录,简约,github登录类型,放在右侧",
    experimental_attachments: [],
  },
  {
    id: "30",
    role: "assistant",
    content:
      '好的，我来为您创建一个简约的React登录组件，类似于GitHub的登录界面，并将其放置在右侧。我们将使用Tailwind CSS进行样式设计，并添加一个GitHub风格的登录按钮。\n\n<thinking>这个请求适合创建一个新的React组件artifact。它是一个独立的、可重用的UI元素，可能会在多个地方使用或被修改。我们将创建一个新的artifact，标识符为"github-style-login"。</thinking>\n\n<artifact identifier="github-style-login" type="application/react" title="GitHub Style Login Component">\nimport React, { useState } from \'react\';\nimport { GitHub } from \'lucide-react\';\n\nconst LoginComponent = () => {\n  const [username, setUsername] = useState(\'\');\n  const [password, setPassword] = useState(\'\');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    console.log(\'Login submitted\', { username, password });\n    // Here you would typically handle the login logic\n  };\n\n  return (\n    <div className="flex justify-end min-h-screen bg-gray-100">\n      <div className="w-full max-w-md p-8 space-y-8 bg-white shadow-md">\n        <div>\n          <h2 className="mt-6 text-3xl font-extrabold text-center text-gray-900">\n            Sign in to your account\n          </h2>\n        </div>\n        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n          <div className="rounded-md shadow-sm space-y-4">\n            <div>\n              <label htmlFor="username" className="sr-only">\n                Username or email address\n              </label>\n              <input\n                id="username"\n                name="username"\n                type="text"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Username or email address"\n                value={username}\n                onChange={(e) => setUsername(e.target.value)}\n              />\n            </div>\n            <div>\n              <label htmlFor="password" className="sr-only">\n                Password\n              </label>\n              <input\n                id="password"\n                name="password"\n                type="password"\n                required\n                className="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"\n                placeholder="Password"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n              />\n            </div>\n          </div>\n\n          <div>\n            <button\n              type="submit"\n              className="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n            >\n              Sign in\n            </button>\n          </div>\n        </form>\n        <div>\n          <button\n            type="button"\n            className="relative flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md group hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"\n          >\n            <GitHub className="w-5 h-5 mr-2" />\n            Sign in with GitHub\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default LoginComponent;\n</artifact>\n\n这个React组件创建了一个简约的登录界面，类似于GitHub的风格，并放置在右侧。以下是组件的主要特点：\n\n1. 使用Tailwind CSS进行样式设计，确保简洁美观。\n2. 包含用户名/邮箱和密码输入框。\n3. 添加了一个常规的"Sign in"按钮。\n4. 包含一个GitHub风格的登录按钮，使用Lucide React的GitHub图标。\n5. 整个登录表单放置在右侧。\n\n要使用这个组件，你需要确保你的项目中已经设置了Tailwind CSS和Lucide React。如果需要进一步自定义或添加功能，请随时告诉我。',
    experimental_attachments: [],
  },
];
export default messageDemo;
